<template>
    <div class="mint-loadmore">
        <div class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :style="{ 'transform': transform }">
            <slot name="top">
                <div class="mint-loadmore-top" v-if="topMethod">
                    <spinner v-if="topStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
                    <span class="mint-loadmore-text">{{ topText }}</span>
                </div>
            </slot>
            <slot></slot>
            <div class="mint-loadmore-bottom" v-if="bottomMethod">
                <spinner v-if="bottomStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
                <slot name="bottom">
                    <span class="mint-loadmore-text">{{ bottomText }}</span>
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
    import { Loadmore } from 'mint-ui'
    export default {
        extends: Loadmore,
    }
</script>
